/**
* @description : 标签关联
* @descriptionDetail : 标签关联
* @copyright : 辽宁烟草
* @author : mc
* @create : 2022-12-05 15:33:20
*/
<template>
  <view>
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
      <!-- <view class="nav-right-icon">
        <u-icon name="scan" color="#FFF" @tap="scan"></u-icon>
      </view> -->
    </theme-navbar>
    <!-- #endif -->
    <!-- #ifdef H5-WECHAT || H5-EMP -->
    <fab-button :content="fContent" @fabtrigger="fabtrigger"/>
    <!-- #endif -->
    <view class="content u-page">
      <view class="main">
        <view v-for="(item,index) in labelList" :key="item.categoryUuid">
          <view class="label_title">
            <u-section
                :title="`${item.categoryName}`"
                :right="false"
                :line-color="`${item.categoryColor}`"
                font-size="28"
            ></u-section>
          </view>
          <view class="label_cont">
            <u-checkbox-group >
              <u-checkbox
                  @change="checkboxChange"
                  style="margin-right:20px;" v-model="item.selected" :name="item.labelUuid" v-for="(item,index) in item.labelList" :key="item.labelUuid">{{ item.labelName }}
              </u-checkbox>
            </u-checkbox-group>
          </view>

        </view>
        <view style="padding:20px; margin:0 30px;">
          <u-button type="primary" shape="circle" @click="saveClick">保存</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import commonService from "@/service/score/score.service.js";
import fabButton from '@/components/uni-fab.vue';

export default {
  components: {
    fabButton,
  },
  data() {
    return {
      parameterData: '',
      labelList: [],
    };
  },
  mounted() {
    this.loadData();
  },
  onLoad() {
    this.parameterData = this.getRouteParam();
  },
  onUnload() {
    console.log('onUnload');
  },
  methods: {
    loadData() {
      commonService.getLabelList({
        licNo: this.parameterData.licNo
      }).then(res => {
        if (res.success) {
          this.labelList = res.data
          console.log(this.labelList)
        } else {
          this.$modal.alert(res.msg);
          this.labelList = []
        }
      }).catch(err => {
        this.$modal.alert("请求失败");
        this.labelList = []
      });
    },
    // 选中某个复选框时，由checkbox时触发
    checkboxChange(e) {
      // console.log(e);
    },
    // 保存
    saveClick() {
      const labelUuidList = this.labelList.map(item => item.labelList).flat().filter(item => item.selected).map(item => item.labelUuid)
      commonService.postLabelSave({
        licNo: this.parameterData.licNo,
        labelUuidList: labelUuidList
      }).then(res => {
        if (res.success) {
          this.$modal.alert('提交成功', () => {
            this.backPrev({
              paramKey: 'refreshBack',
              param: true,
            });
          });
        } else {
          this.$modal.alert(res.msg);
        }
      }).catch(err => {
        this.$modal.alert("请求失败");
      })
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/common/rightMenu.scss";

.nolicence-search-lay {
  background-color: #fff;
  position: fixed;
  // #ifndef H5-DINGDING
  top: 44px;
  // #endif
  // #ifdef H5-DINGDING
  top: 0px;
  // #endif
  z-index: 999;
  width: 100%;
  overflow: hidden;
}

.main {
  background-color: $uni-bg-color-grey;
  min-height: 100vh;
  padding-bottom: 30px;
}

.label_title {
  padding: 10px 20px;
  background: #fff;
  margin-bottom: 10px;

  span {
    float: left;
    font-size: 12px;
    font-weight: bold;
    color: #0070d2;
    margin-right: 10px;
  }
}

.label_cont {
  padding: 10px 20px;
  background: #fff;
  margin-bottom: 10px;
  min-height: 50px;
}

.dataTab {
  width: 730rpx;
  margin-left: 10rpx;
}

.scoreA {
  padding: 5px 15px;
  background: #FFF;
  margin-bottom: 10px;
}

.scoreB {
  padding: 5px 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #666;
}

// .name_a {
// 	color: blue;
// }

// .smoke_info_item {
// 	float: left;
// 	overflow: hidden;
// 	margin: 15px 10px 0px;
// 	background-color: #FFFFFF;
// 	border-radius: 30rpx;
// }

// .smoke_info_item:nth-child(2) {
// 	margin-top: 0;
// }

// .scoll_content {
// 	background-color: #EFF3F9;
// }
</style>
